<template>
	<view class="supplier-container">
		<!-- 顶部搜索区域 -->
		<view class="search-area">
			<view class="search-box">
				<u-icon name="search" size="28" color="#909399"></u-icon>
				<input type="text" placeholder="输入人名/公司名称/手机号" v-model="searchKeyword.supplierName" />
			</view>
			<text class="only-arrears" @click="toggleOnlyArrears">只看欠款</text>
		</view>
		
		<!-- 供应商列表区域 -->
		<view class="supplier-list" v-if="supplierList.length > 0">
			<view class="supplier-item" v-for="(item, index) in supplierList" :key="index" @click="selectSupplier(item)">
				<view class="supplier-info">
					<view class="supplier-name">{{ item.contactName }}</view>
					<view class="supplier-phone">{{ item.mobileNumber }}</view>
				</view>
				<view class="supplier-amount" :class="{'amount-positive': item.amount >= 0, 'amount-negative': item.amount < 0}">
					<text>{{ item.amount >= 0 ? '余额' : '欠款' }}</text>
					<text class="amount">{{ Math.abs(item.amount).toFixed(2) }}</text>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<image src="/static/images/empty-supplier.png" class="empty-image" mode="aspectFit" style="opacity: 0.5;"></image>
			<text class="empty-text">暂无相关供应商管理信息</text>
		</view>
		
		<!-- 底部新增按钮 -->
		<view class="add-supplier-btn" @click="addNewSupplier">
			<u-icon name="plus" color="#fff" size="24"></u-icon>
			<text>新增供应商</text>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js'
	export default {
		data() {
			return {
				searchKeyword: {
					supplierName: '',
					contactName: '',
					mobileNumber: '',
				},
				onlyArrears: false,
				supplierList: [], 
			}
		},
		onShow() {
			// 加载供应商数据
			this.loadSupplierData();
		},
		methods: {
			// 加载供应商数据
			loadSupplierData() {
				api.listSupplier(this.searchKeyword).then(res => {
					console.log('获取供应商列表成功:', res);
					
					if (res.rows) {
						this.supplierList = res.rows.map(item => ({
							...item,
							// amount: parseFloat(item.amountPayable || 0)
						}));
					} else {
						uni.showToast({
							title: res.message || '获取供应商列表失败',
							icon: 'none'
						});
					}
					uni.hideLoading();
				}).catch(err => {
					console.error('获取供应商列表失败:', err);
					uni.hideLoading();
					uni.showToast({
						title: '获取供应商列表失败',
						icon: 'none'
					});
				});
					// 模拟加载完成
				},
			
			// 切换是否只显示欠款供应商
			toggleOnlyArrears() {
				this.onlyArrears = !this.onlyArrears;
				uni.showToast({
					title: this.onlyArrears ? '已切换到只看欠款' : '已显示全部供应商',
					icon: 'none'
				});
				this.loadSupplierData(); // 重新加载数据
			},
			
			// 选择供应商
			selectSupplier(supplier) {
				uni.navigateTo({
					url: `/pages/supplier/edit?id=${supplier.supplierId}`
				});
			},
			
			// 新增供应商
			addNewSupplier() {
				uni.navigateTo({
					url: '/pages/supplier/add'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.supplier-container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding-bottom: 120rpx; /* 为底部按钮留出空间 */
}

/* 搜索区域样式 */
.search-area {
	padding: 20rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
	
	.search-box {
		flex: 1;
		height: 72rpx;
		background-color: #f5f5f5;
		border-radius: 36rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		
		input {
			flex: 1;
			height: 100%;
			margin-left: 12rpx;
			font-size: 28rpx;
		}
	}
	
	.only-arrears {
		font-size: 26rpx;
		color: #39C9BB;
		margin-left: 20rpx;
		padding: 0 10rpx;
	}
}

/* 供应商列表样式 */
.supplier-list {
	background-color: #fff;
	
	.supplier-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #eee;
		
		.supplier-info {
			.supplier-name {
				font-size: 30rpx;
				color: #333;
				margin-bottom: 6rpx;
				font-weight: 500;
			}
			
			.supplier-phone {
				font-size: 24rpx;
				color: #909399;
			}
		}
		
		.supplier-amount {
			text-align: right;
			
			text {
				font-size: 24rpx;
				color: #909399;
				display: block;
			}
			
			.amount {
				font-size: 30rpx;
				font-weight: 500;
				margin-top: 4rpx;
			}
			
			&.amount-positive {
				.amount {
					color: #19be6b;
				}
			}
			
			&.amount-negative {
				.amount {
					color: #fa3534;
				}
			}
		}
	}
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
	
	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #909399;
	}
}

/* 底部新增按钮 */
.add-supplier-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #39C9BB;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-weight: 500;
	
	text {
		margin-left: 8rpx;
	}
}
</style> 